<script>
import * as echarts from 'echarts';


export default {
    data() {
        return {
            myChart: null,
            myChart1: null,
            myChart2: null,
            myChart3: null,
            myChart4: null,
            myChart5: null,
            myChart6: null,
        }
    },
    methods: {
        // 成交总金额
        changeType() {
            // 绘制图表
            this.myChart.setOption({
                title: {
                    text: '成交金额'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['房屋', '家服', '维修']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '房屋',
                        type: 'line',
                        stack: 'Total',
                        data: [63000, 55000, 50000, 58000, 62000, 68000, 69000, 68000, 67000, 61000, 58000, 51000],
                        symbolSize: 0,  //改变线上圆点的大小
                        smooth: 0.5   // 线的弧度  0-1之间
                    },
                    {
                        name: '家服',
                        type: 'line',
                        stack: 'Total',
                        data: [60000, 52000, 47000, 55000, 59000, 64000, 63000, 64000, 63000, 57000, 53000, 47000],
                        symbolSize: 0,  //改变线上圆点的大小
                        smooth: 0.5   // 线的弧度  0-1之间
                    },
                    {
                        name: '维修',
                        type: 'line',
                        stack: 'Total',
                        data: [40000, 49000, 42000, 50000, 51000, 58000, 53000, 54000, 60000, 53000, 47000, 39000],
                        symbolSize:0,  //改变线上圆点的大小
                        smooth: 0.5   // 线的弧度  0-1之间
                    },


                ]


            });

        },

        changeType1() {
            this.myChart1.setOption({
                title: {
                    text: '地区分布'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 6000, name: '上城区   60%' },
                            { value: 5000, name: '西湖区   50%' },
                            { value: 4500, name: '拱墅区   45%' },
                            { value: 4000, name: '钱塘区   40%' },
                            { value: 3800, name: '滨江区   38%' },
                            { value: 2600, name: '萧山区   26%' },
                        ]
                    }
                ]
            })

        },

        changeType2() {
            this.myChart2.setOption({
                color: ["#c2e0ff"], //阴影颜色

                title: [
                    {
                        text: '昨日点击量',
                        textStyle: {
                            fontSize: 10,   //text的字体大小
                            color: "#c2e0ff"   // 字体颜色
                        },
                    },
                ],
                xAxis: {
                    axisLine: false,  // 是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    axisLine: false,  //是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'value',
                    splitLine: {  // 消除背景的网格
                        show: false
                    },
                },
                grid: {
                    top: 36,
                    height: 80,
                    left: 0,
                    bottom: 0,
                    right: 0
                },
                series: [
                    {
                        data: [82, 93, 90, 93, 121, 133, 132],
                        type: 'line',
                        areaStyle: {},
                        // symbolSize: 0,  //改变线上圆点的大小
                        symbol: "none",  //折线图折点消失
                        smooth: 0.5   // 线的弧度  0-1之间
                    }
                ]
            })

        },
        changeType3() {
            this.myChart3.setOption({
                color: ["#ffbc94"],

                title: [
                    {
                        text: '昨日浏览量',
                        textStyle: {
                            fontSize: 10,
                            color: "#ffbc94"
                        },
                    },
                ],
                xAxis: {
                    axisLine: false,  // 是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    axisLine: false,  //是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'value',
                    splitLine: {  // 消除背景的网格
                        show: false
                    },
                },
                grid: {
                    top: 36,
                    height: 80,
                    left: 0,
                    bottom: 0,
                    right: 0
                },
                series: [
                    {
                        data: [123, 132, 110, 121, 133, 132, 120],
                        type: 'line',
                        areaStyle: {},
                        symbolSize: 0,  //改变线上圆点的大小
                        smooth: 0.5   // 线的弧度  0-1之间
                    }
                ]
            })

        },
        changeType4() {
            this.myChart4.setOption({
                color: ["#cbb4f9"],

                title: [
                    {
                        text: '每周浏览量',
                        textStyle: {
                            fontSize: 10,
                            color: "#cbb4f9"
                        },
                    },
                ],

                xAxis: {
                    axisLine: false,  // 是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    axisLine: false,  //是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'value',
                    splitLine: {  // 消除背景的网格
                        show: false
                    },

                },
                grid: {
                    top: 36,
                    // top: 10,
                    height: 80,
                    left: 0,
                    bottom: 0,
                    right: 0
                },
                series: [
                    {
                        data: [82, 100, 85, 120, 130, 125, 110],
                        type: 'line',
                        areaStyle: {},
                        symbolSize: 0,  //改变线上圆点的大小
                        smooth: 0.5   // 线的弧度  0-1之间
                    }
                ]
            })

        },
        changeType5() {
            this.myChart5.setOption({
                color: ["#a7ece3"],
                title: [
                    {
                        text: '每周订单量',
                        textStyle: {
                            fontSize: 10,
                            color: "#a7ece3"
                        },
                    },
                ],

                xAxis: {
                    axisLine: false,  //是否显示坐标轴轴线。false 不显示  true 显示
                    // axisTick:false,    // 下面的刻度尺 消失上面的设置后这个就不用设置了
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    axisLine: false,  //是否显示坐标轴轴线。false 不显示  true 显示
                    type: 'value',
                    splitLine: {  // 消除背景的网格
                        show: false
                    },
                },
                grid: {
                    top: 36,
                    height: 80,
                    left: 0,
                    // left: 20,
                    bottom: 0,
                    right: 0
                },
                series: [
                    {
                        data: [82, 92, 102, 92, 82, 100, 112],
                        type: 'line',
                        areaStyle: {},
                        symbolSize: 0,  //改变线上圆点的大小
                        smooth: 0.5   // 线的弧度  0-1之间
                    }
                ]
            })

        },

        changeType6() {
            this.myChart6.setOption({
                title: [
                    {
                        text: '房屋状况',
                        textStyle: {
                            fontSize: 15,
                            color: "black"
                        },
                    },
                ],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 122489, name: '已经出租的房屋 122489间' },
                            { value: 61689, name: '正在交易的房屋61689间' },
                            { value: 34620, name: '还没交易的房屋 34620间' },

                        ]
                    }
                ]
            })

        },






    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('main'));
        this.changeType('pie') //调用上面的方法

        this.myChart1 = echarts.init(document.getElementById('main1'));
        this.changeType1('pie') //调用上面的方法

        this.myChart2 = echarts.init(document.getElementById('main2'));
        this.changeType2('pie') //调用上面的方法

        this.myChart3 = echarts.init(document.getElementById('main3'));
        this.changeType3('pie') //调用上面的方法

        this.myChart4 = echarts.init(document.getElementById('main4'));
        this.changeType4('pie') //调用上面的方法

        this.myChart5 = echarts.init(document.getElementById('main5'));
        this.changeType5('pie') //调用上面的方法

        this.myChart6 = echarts.init(document.getElementById('main6'));
        this.changeType6('pie') //调用上面的方法


    }
}
</script>

<template>
    <div class="box1">
        <div class="top">
            <div class="box2" id="main2"></div>
            <div class="box2" id="main3"></div>
            <div class="box2" id="main4"></div>
            <div class="box2" id="main5"></div>
        </div>
        <div class="bottom">
            <div class="left" id="main">left</div>
            <div class="right">
                <div class="right-top" id='main1'></div>
                <div class="right-bottom" id="main6">bottom</div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.box1 {
    width: 100%;
    height: 100%;
    background-color: rgb(246, 246, 246);
}

.top {
    width: 100%;
    height: 19%;
    display: flex;
    justify-content: space-between;
}

.box2 {
    width: 24.5%;
    height: 100%;
    background-color: white;
    border-radius: 10px;
}

.bottom {
    width: 100%;
    height: 78%;
    display: flex;
    margin-top: 10px;
}

.left {
    width: 60%;
    height: 100%;
    background-color: white;
    margin-right: 10px;
    border-radius: 10px;

}

.right {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.right-top {
    height: 50%;
    width: 100%;
    background-color: white;
    margin-bottom: 5px;
    border-radius: 10px;


}

.right-bottom {
    height: 50%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;

}
</style>